<template>
  <div>
    <template v-if="showMobilePage">
      <ListTab v-model="defaultActive" :tabs="sidebarData" :key-name="'label'" :id-name="'name'" is-center is-table padding-left="0px" @tabClick="handelTabClick"/>
      <helpModule v-if="sideModule.children" :data="sideModule" :active-module="activeModule" @moduleClick="moduleClick"/>
    </template>
    <div
      v-if="!showMobilePage"
      ref="helpSidebar"
      :class="{'fixed-sidebar':isInDetail}"
      class="help-sidebar">
      <el-menu
        :default-active="defaultActive"
        mode="vertical"
        background-color="#fff"
        active-text-color="#406eff"
        @select="handleSelect"
      >
        <el-menu-item index="newRead" style="padding: 0 40px" class="el-item-title item-new-title">
          <template slot="title">
            <span class="el-item-title-text">新手必读</span>
            <svg-icon icon-class="help-new" class="newbie-icon" />
          </template>
        </el-menu-item>
        <div class="line" />
        <div v-for="(route, index) in sidebarData" :key="index">
          <el-submenu :index="route.label" class="el-item-title">
            <template slot="title">
              <span class="el-item-title-text">{{ route.label }}</span>
            </template>
            <template v-if="hasOneShowChild(route.children)">
              <div v-for="(children, i) in route.children" :key="i">
                <el-menu-item :index="children.name" class="el-two-child-title">{{ children.label }}</el-menu-item>
              </div>
            </template>
          </el-submenu>
          <div class="line" />
        </div>
        <el-menu-item index="announce" class="el-item-title menu-title">
          <template slot="title">
            <span class="el-item-title-text">公告</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
import ListTab from '@/components/ListTab';
import { getSideBarData } from './model/sidebarData';
import helpModule from './helpModule';
import { mapState } from 'vuex';

export default {
  components: { ListTab, helpModule },
  props: {
    modelName: {
      type: String,
      default: ''
    },
    isInDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultActive: 'newRead',
      activeModule: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    sidebarData() {
      const list = getSideBarData();
      if (this.showMobilePage) {
        list.unshift({ label: '新手必读', name: 'newRead', newRead: 1, children: [] });
      }
      return list;
    },
    sideModule() {
      const res = this.sidebarData.filter(item => {
        return item.name === this.defaultActive;
      });
      return res[0] || {};
    }
  },
  watch: {
    modelName: {
      handler(val) {
        if (!this.showMobilePage && val) {
          // 如果从内页进入的话则定位到相应的二级侧边栏上面
          for (let i = 0; i < this.sidebarData.length; i++) {
            const childrenName = this.sidebarData[i].children.filter(ele => {
              if (ele.childrenName) {
                return ele.childrenName.indexOf(val) > -1;
              }
            });
            if (childrenName.length) {
              this.defaultActive = childrenName[0].name;
              return true;
            } else {
              this.defaultActive = val;
            }
          }
        } else if (val === '') {
          this.defaultActive = '';
        } else {
          this.getParentName();
        }
      },
      immediate: true
    }
  },
  created() {
    // this.getParentName();
    this.$nextTick(() => {
      if (!this.showMobilePage && this.isInDetail) {
        window.addEventListener('scroll', this.setStyle);
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.setStyle);
  },
  methods: {
    setStyle() {
      const top = 148 - window.scrollY < 0 ? 0 : 148 - window.scrollY;
      if (this.$refs.helpSidebar) {
        this.$refs.helpSidebar.style.top = top + 48 + 'px';
        this.$refs.helpSidebar.style.height = `calc(100vh - ${top}px - 48px - 56px)`;
      }
    },
    handelTabClick(name) {
      const temp = this.sidebarData.filter(item => {
        return item.name === name;
      });
      if (temp.length > 0 && temp[0].children.length > 0) {
        this.handleSelect(temp[0].children[0].name);
      } else {
        this.handleSelect(name);
      }
    },
    handleSelect(name) {
      console.log(name);
      this.$emit('getName', name);
    },
    getModule() {
      const temp = this.sidebarData.filter(item => {
        return item.name === this.defaultActive;
      });
      if (temp.length > 0 && temp[0].children.length > 0) {
        this.activeModule = temp[0].children[0].name;
      }
    },
    hasOneShowChild(children) {
      const showingChildren = children.filter(item => {
        return !item.children;
      });
      if (showingChildren.length) return true;
    },
    moduleClick(val) {
      this.$emit('getName', val);
      this.activeModule = val;
    },
    getParentName() {
      const len = this.sidebarData.length;
      let child = null;
      let a; let b;
      for (let i = 0; i < len; i++) {
        if (this.modelName === this.sidebarData[i].name) {
          a = i;
          break;
        }
        child = this.sidebarData[i].children;
        for (let m = 0; m < child.length; m++) {
          if (this.modelName === child[m].name) {
            b = m;
            break;
          }
        }
        if (b || b === 0) {
          a = i;
          break;
        }
      }
      this.defaultActive = this.sidebarData[a] ? this.sidebarData[a].name : '';
      if (b || b === 0) {
        this.activeModule = this.modelName;
      } else {
        this.getModule();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.help-sidebar {
  position: relative;
  min-width: 209px;
  background: #fff;
  height: calc(100vh - 140px - 56px);
  @include scrollBar($x: hidden, $y:auto, $width: 4px);
  &.fixed-sidebar {
    position: fixed;
    height: calc(100vh - 140px - 56px - 56px);
    top: 196px;
  }
}
%menu-item-style {
  padding: 0 40px 0 41px !important;
  height: 20px;
  line-height: 20px;
  margin: 16px 0;
}
.help-sidebar {
  .el-menu {
    border-right: none;
  }
  .line {
    width: 160px;
    height: 0;
    border-top: 1px solid #ddd;
    margin: 0 auto;
  }
  .menu-title{
    @extend %menu-item-style;
    &:hover {
      background: #fff !important;
      color: #406eff !important;
    }
  }
  .item-new-title {
    display: flex;
    align-items: center;
    &:hover {
      background: #fff !important;
      color: #406eff !important;
    }
  }
  .el-item-title.is-active {
    background: #fff !important;
    color: #406eff !important;
  }
  .el-item-title {
    .el-item-title-text {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .newbie-icon {
      margin-left: 4px;
    }
    & ::v-deep {
      .el-submenu__title {
        @extend %menu-item-style;
        .el-submenu__icon-arrow {
          right: 40px;
        }
        &:hover {
          background: #fff !important;
        }
      }
    }
    .el-two-child-title {
      font-size: 14px;
      font-weight: 400;
      color: #666666 !important;
      padding-left: 52px !important;
      opacity: 1;
      cursor: pointer;
      background: #fff !important;
      height: 20px !important;
      line-height: 20px !important;
      margin-bottom: 16px;
      &:hover {
        color: #406eff !important;
        background: #fff !important;
      }
    }
  }
  .el-submenu .el-menu-item.is-active {
    font-size: 14px;
    font-weight: 500;
    color: #406eff !important;
  }
}
</style>
